<template>
	<router-link class="boxAll" :to="{path:'/detail',query:{info:info._id}}" @click.native="cancelChangeBanner">
		<div class="left">
			<div class="title">{{info.title}}</div>
			<div class="context">{{info.text}}</div>
			<div class="info">
				<div class="writer">
					<div class="writerPic">
						<img :src="ip+'/'+info.userID.imgurl" />
					</div>
					<div class="infoContext">{{info.userID.name}}</div>
				</div>
				<div class="like">
					<img src="../../static/dislike.png" />
					<div class="infoContext">{{info.like}}点赞</div>
				</div>
				<div class="comment">
					<img src="../../static/comment.png" />
					<div class="infoContext">{{info.comment}}条评论</div>
				</div>
			</div>
		</div>
		<div class="right" :style="{'display':info.pic?'flex':'none'}">
			<img :src="ip+'/'+info.pic" />
		</div>
	</router-link>
</template>

<script>
	export default {
		props: ['info'],
		methods: {
			cancelChangeBanner() {
				this.$store.commit({
					type: "changeBanner",
					data: false
				})
			}
		}
	}
</script>

<style>
	.boxAll {
		width: calc(100% - 32px);
		padding: 16px;
		display: flex;
		flex-direction: row;
		color: #000000;
		text-decoration: none;
	}

	.boxAll .left {
		flex: 3;
	}

	.boxAll .right {
		flex: 2;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.boxAll .right img {
		height: 110px;
		width: 190px;
		object-fit: cover;
		border-radius: 8px;
	}

	.boxAll .left .title {
		height: 42px;
		line-height: 42px;
		font-size: 18px;
		font-weight: bold;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
	}

	.boxAll .left .context {
		font-size: 8px;
		line-height: 24px;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.boxAll .left .info {
		margin-top: 16px;
	}

	.boxAll .left .info,
	.boxAll .left .info .writer,
	.boxAll .left .info .like,
	.boxAll .left .info .comment {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.boxAll .left .info .writer .writerPic,
	.boxAll .left .info .writer .writerPic img {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.boxAll .left .info .like img {
		width: 20px;
		height: 20px;
	}

	.boxAll .left .info .comment img {
		width: 24px;
		height: 20px;
	}

	.boxAll .left .info .infoContext {
		font-size: 8px;
		color: #999999;
		margin: 0 24px 0 8px;
	}
</style>
